<template>
	<view class="wrap" style="padding-top:50rpx;">
		<view class="reg-text">信 息 填 写</view>

		<view>
			<!-- 输入框 -->
			<view class="list">
				<u-form :model="form">
					<u-form-item label="昵 称" :label-width='120' :label-style="{fontSize:'35rpx'}">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="手 机" :label-width='120' :label-style="{fontSize:'35rpx'}">
						<u-input v-model="form.phone" type="number" maxlength="11" />
					</u-form-item>
					<u-form-item label="性 别" :label-width='120' :label-style="{fontSize:'35rpx'}">
						<u-input v-model="form.sex" type="select" @click="showGender = true" />
						<u-action-sheet :list="genderList" v-model="showGender" @click="changeGender" />
					</u-form-item>
					<u-form-item label="城 市" :label-width='120' :label-style="{fontSize:'35rpx'}">
						<u-input v-model="form.city" type="select" @click="showCity = true" />
						<u-picker mode="region" v-model="showCity" @confirm='changeCity' />
					</u-form-item>
					<u-form-item label="身 份" :label-width='120' :label-style="{fontSize:'35rpx'}">
						<u-radio-group v-model="form.role">
							<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
			</view>

			<view class="button" @click="regNext"><text>完 成</text></view>

			<view class="bottom-box">
				<view class="copyright">
					注册即代表您已阅读并同意<u-link href="#">用户协议</u-link> 与 <u-link href="#">隐私政策</u-link>
				</view>
			</view>
		</view>

		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showGender: false,
				showCity: false,
				form: {
					name: '',
					sex: '',
					city: '',
					phone: '',
					role: ''
				},
				genderList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				cityList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				radioList: [{
						name: '个人',
						disabled: false
					},
					{
						name: '教练',
						disabled: false
					}
				]
			};
		},

		methods: {
			// 点击actionSheet回调
			changeGender(index) {
				this.form.sex = this.genderList[index].text;
			},
			changeCity(cityObj) {
				this.form.city = cityObj.province.label + cityObj.city.label + cityObj.area.label;
			},
			showToast(flag) {
				if (flag) {
					this.$refs.uToast.show({
						title: '注册成功',
						type: 'success',
					})
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/sys/login/index'
						});
					}, 500);
				} else {
					this.$refs.uToast.show({
						title: '注册失败',
						type: 'error',
					})
				}
			},
			regNext() {
				let userInfo = this.$store.state.userRegInfo
				this.$u.vuex('userRegInfo', {
					'username': userInfo.username,
					'password': userInfo.password,
					'nickname': this.form.name,
					'phone': this.form.phone,
					'address': this.form.city,
					'rid': this.form.role === '个人' ? 101 : 102,
					'vid': 201
				})
				// 注册请求
				this.$u.api.registerUser(this.$store.state.userRegInfo)
					.then(res => {
						if (res.code === 200) {
							this.showToast(true)
						} else {
							this.showToast(false)
						}
					});
			}
		}
	}
</script>

<style>
	@import 'index.scss';

	.uni-input-placeholder {
		font-size: 32rpx;
	}

	.uni-input-input {
		font-size: 32rpx;
	}

	.u-border-bottom:after {
		border-bottom-width: 0px !important;
	}

	.bottom-box {
		border-top: 0px !important;
	}

	.u-input {
		border-bottom: 1px solid black;
	}
</style>
